<script setup>
import { ref, onMounted, markRaw, reactive } from 'vue';

let props = defineProps(['entityData', 'eventData'])

import Component101 from '../component_library/qingChengHuiAi/Component101.vue';
import Component102 from '../component_library/qingChengHuiAi/Component102.vue';
import Component103 from '../component_library/qingChengHuiAi/Component103.vue';
import Component104 from '../component_library/qingChengHuiAi/Component104.vue';
import Component105 from '../component_library/qingChengHuiAi/Component105.vue';
import Component106 from '../component_library/qingChengHuiAi/Component106.vue';
import Component201 from '../component_library/qingChengHuiAi/Component201.vue';
import Component202 from '../component_library/qingChengHuiAi/Component202.vue';
import Component301 from '../component_library/qingChengHuiAi/Component301.vue';
import Component302 from '../component_library/qingChengHuiAi/Component302.vue';
import Component303 from '../component_library/qingChengHuiAi/Component303.vue';
import Component304 from '../component_library/qingChengHuiAi/Component304.vue';
import Component305 from '../component_library/qingChengHuiAi/Component305.vue';
import Component401 from '../component_library/qingChengHuiAi/Component401.vue';
import Component501 from '../component_library/qingChengHuiAi/Component501.vue';
import Component601 from '../component_library/qingChengHuiAi/Component601.vue';


console.log('-------------<>');
console.log(props.entityData);

// 测试环境
let entityData = props.entityData
let eventData = props.eventData

console.log(entityData);
let mergedArray = [...entityData]

async function loadComponentByCode(componentCode, cofig) {
    try {
        // 从配置URL获取所有组件的配置信息
        const componentsConfig = cofig.components;
        // 在组件配置中查找与给定代码匹配的组件配置
        const componentConfig = componentsConfig.find(item => item.code === componentCode)
        if(!componentConfig) return
        // const componentPath = componentConfig.path;
        // 根据组件路径异步加载组件
        // const Component = await import(/* @vite-ignore */componentPath);
        // return Component.default || Component;
        return componentConfig.name
    } catch (error) {
        console.error('Failed to load component:', error);
        return null;
    }
}


// 引入配置文件
import componentsConfigUrl from '../component_library/components_config.json'
const componentDatas = reactive([]);
// 在组件挂载时初始化应用，并动态加载组件
onMounted(async () => {

    // 遍历code列表，动态加载每个组件
    for (const item of entityData) {
        if (item.field33 == '') continue
        const Component = await loadComponentByCode(item.field33, componentsConfigUrl);
        console.log(Component);

        if (Component) {
            let componentData = {
                data: item,
                component: Component
            }
            // let component = markRaw(componentData);
            // 将组件ID添加到列表中，用于后续操作
            // componentDatas.value.push(component);
            componentDatas.push(componentData);

        }
    }

});
</script>

<template>
    <div class="max-box">
        <div class="max-box-son">
            <!-- <component v-for="componentItem in componentDatas" :entityDataItem="componentItem.data"
                :key="componentItem.component" :is="componentItem.component"></component> -->
                <template v-for="componentItem in componentDatas" :key="componentItem.component">
                    <Component101 v-if="componentItem.component == 'Component101'" :entityDataItem="componentItem.data"/>
                    <Component102 v-if="componentItem.component == 'Component102'" :entityDataItem="componentItem.data"/>
                    <Component103 v-if="componentItem.component == 'Component103'" :entityDataItem="componentItem.data"/>
                    <Component104 v-if="componentItem.component == 'Component104'" :entityDataItem="componentItem.data"/>
                    <Component105 v-if="componentItem.component == 'Component105'" :entityDataItem="componentItem.data"/>
                    <Component106 v-if="componentItem.component == 'Component106'" :entityDataItem="componentItem.data"/>
                    <Component201 v-if="componentItem.component == 'Component201'" :entityDataItem="componentItem.data"/>
                    <Component202 v-if="componentItem.component == 'Component202'" :entityDataItem="componentItem.data"/>
                    <Component301 v-if="componentItem.component == 'Component301'" :entityDataItem="componentItem.data"/>
                    <Component302 v-if="componentItem.component == 'Component302'" :entityDataItem="componentItem.data"/>
                    <Component303 v-if="componentItem.component == 'Component303'" :entityDataItem="componentItem.data"/>
                    <Component304 v-if="componentItem.component == 'Component304'" :entityDataItem="componentItem.data"/>
                    <Component305 v-if="componentItem.component == 'Component305'" :entityDataItem="componentItem.data"/>
                    <Component401 v-if="componentItem.component == 'Component401'" :entityDataItem="componentItem.data"/>
                    <Component501 v-if="componentItem.component == 'Component501'" :entityDataItem="componentItem.data"/>
                    <Component601 v-if="componentItem.component == 'Component601'" :entityDataItem="componentItem.data"/>
                </template>
        </div>
    </div>
</template>


<style scoped>
.max-box {
    width: 100%;
    height: 100%;
    padding: 0 0.4rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background-color: rgb(251, 251, 251);
}

.max-box-son {
    width: 100%;
    padding: 0.6rem;
}
</style>
